<!--  -->
<template>
<div class='expDetail'>
  <!-- xxx实验 -->
  <section class="expIntroduce">
    <div class="title-btn introTop">
      <h3>{{introduceData.expName}}</h3>
      <el-button v-if='introduceData.isStart==2 && introduceData.state == 2' type="primary" style="margin-right:20px" size='small' @click='experOperate("开启")'>开启实验</el-button>
      <el-button v-if='introduceData.isStart==1 && introduceData.state == 2' type="danger" style="margin-right:20px" size='small' @click='experOperate("结束")'>结束实验</el-button>
    </div>
    <div class="introDetail">
      <tr>
        <td>实验类型：</td>
        <td>{{toExpType(introduceData.expGroup)}}</td>
      </tr>
      <tr>
        <td>实验期限：</td>
        <td>
          <el-date-picker disabled v-model="introduceData.time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </td>
      </tr>
      <tr>
        <td>结果提交方式：</td>
        <td>{{toPostType(introduceData.resSubway)}}</td>
      </tr>
      <tr style="vertical-align: top">
        <td>实验描述：</td>
        <td style="width: 800px">
          <el-input disabled type="textarea" :autosize="{maxRows: 8}" placeholder="暂无实验描述" v-model="introduceData.remark"></el-input></td>
      </tr>
    </div>
  </section>
  <!-- 拓扑资源展示 -->
  <section class="tpResource">
    <div class="title-btn resourceTop">
      <h3>拓扑资源展示</h3>
      <div>
      <el-button type="primary" v-show="introduceData.state != '4'" @click="addResource">增加资源</el-button>
      <el-button type="info" @click="resourceVerify">资源审核列表</el-button>
      </div>
    </div>
    <div class="resourceDetail">
      <aside>
        <ul class="resourceData">
          <li class="resourceItem" v-for="(item, index) in resourceData" :key="index">
            <img src="./images/u23.svg" alt="">
            <span>{{item.title}}</span>
            <span>数量：{{item.num}}</span>
          </li>
        </ul>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[15, 30, 60, 120]"
          :page-size="56"
          layout="total, sizes, prev, pager, next"
          :total="106"
        ></el-pagination>
      </aside>
      <main>
        <img src="./images/u69.jpg" alt="">
      </main>
    </div>
  </section>
  <!-- 填写实验结论 -->
  <section class="expConclusion">
    <div class="title-btn conclusionTop">
      <h3>实验结论填写</h3>
    </div>
    <div class="conclusionDetail" v-if="introduceData.isStart === '1' && (introduceData.state === '2' || introduceData.state === '4')">
      <exper-detail-zb v-if="conclusionType == 1" :id="id" :fileName="introduceData.expName" :state="introduceData.state"></exper-detail-zb>
      <exper-detail-jlx v-else-if="conclusionType == 2" :id="id" :fileName="introduceData.expName" :state="introduceData.state"></exper-detail-jlx>
      <div class="urlBox" v-else-if="conclusionType == 3">
        URL地址： 
        <el-input v-model="url"></el-input>
        <el-button type="primary" @click="toURL(url)">URL跳转链接</el-button>
      </div>
      <el-button v-else-if="conclusionType == 4" type="primary" @click="toVNC">VNC连接配置</el-button>
    </div>
    <div class="noStartTip noStart" v-else-if="introduceData.isStart === '2' && introduceData.state === '2'">实验尚未开启!</div>
    <div class="noStartTip noapprove" v-else-if="introduceData.state === '1' && introduceData.checkState === '1'">实验尚未审批!</div>
    <div class="noStartTip noapprove" v-else-if="introduceData.state === '1' && introduceData.checkState === '3'">实验已被驳回!</div>
  </section>
</div>
</template>

<script>
import experDetailJlx from './components/experDetailJlx'
import experDetailZb from './components/experDetailZb'
import api from '../api/exper.detail.js'
import experApi from "../api/exper.service";

export default {
components: {experDetailJlx, experDetailZb},
data() {
  return {
    id: '',
    // xxx实验部分
    expType: [],
    postType: [],
    introduceData: {
      expName: '',
      expGroup: '',
      time: ['', ''],
      resSubway: '',
      remark: ''
    },
    // 拓扑资源展示
    resourceData: [
      {
        title: '服务器',
        num: 20
      },
      {
        title: '交换机',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      },
      {
        title: '服务器',
        num: 20
      }
    ],
    // 实验结论填写
    conclusionType: null,
    url: ''
  };
},
computed: {},
watch: {},
methods: {
  // 开启实验环境
  async experOperate(value) {
    if (value == "结束") {
      this.introduceData.state = 4;
    } else {
      this.introduceData.isStart = 1;
    }
    let data = await experApi.updateExp(this.introduceData);
    if (data.code == 10200) {
      this.$message.success("实验" + value + "成功");
      this.getDetail();
    }
  },
  // 增加资源
  addResource() {
    this.$router.push(`/scienceExper/views/dataAggregation/experiment/applyResources?id=${this.id}`)
  },
  // 资源审核列表
  resourceVerify() {
    console.log('资源审核列表')
  },
  toVNC() {
    console.log('跳转至VNC')
  },
  toURL(url) {
    // 待定
    if (url) {
      window.open(`/#/${url}`, "_blank")
    } else {
      this.$message.error('请先输入URL地址')
    }
  },
  async getDetail() {
    let {data} = await api.getDetail(this.id)
    this.conclusionType = data.resSubway
    this.introduceData = data
    this.introduceData.time = [data.startTime || '', data.endTime || '']
  },
  // 结果提交方式
  async getResultApl() {
    let res =  await experApi.resultApl()
    this.postType = res.data
  },
  toPostType(postTypeValue) {
    for(let item of this.postType) {
      if (item.value == postTypeValue) {
        return item.label
      }
    }
  },
  // 实验类型
  async getExperType() {
    let res =  await experApi.experType()
    this.expType = res.data
  },
  toExpType(expTypeValue) {
    for(let item of this.expType) {
      if (item.value == expTypeValue) {
        return item.label
      }
    }
  },
},
mounted() {
  this.id = this.$route.query.id
  this.getDetail()
},
created() {
  this.getResultApl()
  this.getExperType()
},
}
</script>
<style lang="less" scoped>
.expDetail{
  padding: 20px;

  .expIntroduce{
    .introDetail{
      td{
        padding: 10px 0;
      }
      /deep/.el-date-editor .el-range-separator{
        padding: 0;
      }
    }
  }

  .tpResource{
    .resourceDetail{
      display: flex;
      justify-content: space-around;
      aside{
        width: 20%;
        .resourceData{
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .resourceItem{
            width: 30%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
            img{
              width: 70px;
            }
          }
        }
        /deep/.el-pagination .el-select .el-input{
          width: 90px;
          margin: 0;
        }
        /deep/.el-pagination__total{
          margin-right: 5px;
        }
        /deep/.el-pagination__sizes{
          margin-right: 5px;
        }
        /deep/.el-pagination .btn-prev{
          padding-right: 5px;
        }
        /deep/.el-pagination .btn-next{
          padding-left: 5px;
        }
        /* /deep/.el-pager{
          max-width: 95px;
        } */
        /deep/.el-pager li{
          min-width: 9.5px;
        }
        /deep/.el-pagination button, .el-pagination span:not([class*=suffix]){
          min-width: 22.5px;
        }
      }
      main{
        width: 75%;
        img{
          width: 100%;
          height: 650px;
        }
      }
    }
  }
  .expConclusion{
    .conclusionDetail{
      margin-left: 20px;
      margin-top: 50px;
      .urlBox{
        .el-input{
          width: 700px;
          margin-right: 30px;
        }
      }
    }
  }
}
.container{
  padding: 20px;
  .el-row{
    margin-bottom: 15px;
  }
}
.title-btn{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
section{
  margin-bottom: 40px;
}
.noStartTip{
  font-size: 20px;
  color: rgb(241, 75, 10);
  text-align: center;
}
</style>